<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      label-width="100px"
      ref="form"
      class="kylin-form"
    >
      <el-form-item :label="$t('configure.template_name')" prop="migrateTemplatName">
        <el-input v-model="form.migrateTemplatName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="$t('configure.application_name')" prop="applicationName">
        <el-input v-model="form.applicationName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item :label="$t('file')" prop="file">
        <el-upload
          ref="upload"
          :action="action"
          :file-list="fileList"
          :auto-upload="false"
          accept=".json"
          :on-remove="handleFileChange"
          :on-change="handleFileChange"
        >
          <el-button slot="trigger" size="small" class="kylin-button"
            >{{$t("configure.click_select_file")}}</el-button
          >
          <div slot="tip" class="el-upload__tip">{{$t("only_upload_json")}}</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{$t("cancel")}}</el-button>
      <el-button @click="handleOk" class="kylin-button">{{$t("save")}}</el-button>
    </div>
  </div>
</template>

<script>
import { importMigrateTemplates } from "@/api/migrate_template";
import { successOrError } from "@/utils";
export default {
  props: {
    display: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    let checkFile = (rule, value, callback) => {
      if (this.fileList.length < 1) {
        callback(new Error(this.$t("file_require")));
      } else {
        callback();
      }
    };
    return {
      action: "#",
      fileList: [],
      form: {
        migrateTemplatName: "",
        applicationName: "",
      },
      rules: {
        migrateTemplatName: [
          {
            required: true,
            message: this.$t("configure.template_name_require"),
            trigger: "change",
          },
        ],
        applicationName: [
          {
            required: true,
            message: this.$t("configure.application_name_require"),
            trigger: "change",
          },
        ],
        file: [
          {
            validator: checkFile,
            trigger: "change",
            required: true
          },
        ],
      },
    };
  },
  methods: {
    handleCancel() {
      this.resetForm();
      this.$emit("click");
    },
    handleOk() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let data = new FormData();
          data.append("migrateTemplatName", this.form.migrateTemplatName);
          data.append("applicationName", this.form.applicationName)
          data.append("file", this.fileList[0].raw)
          importMigrateTemplates(data).then((res) => {
            successOrError.call(this, res);
            if (res.data.code == "0") {
                this.fileList = [];
            }
          });
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.fileList = [];
    },
    handleFileChange(file, fileList) {
      if (fileList.length > 1) {
        this.fileList = fileList.slice(-1);
      } else {
        this.fileList = fileList
      }
        this.$refs.form.validateField("file")
    },
  },
};
</script>